/*
  学习目标：生命周期 - 卸载阶段
  三个阶段
     1. 挂载时
     2. 更新时
     3. 卸载时
*/
import React from 'react';
export default class App extends React.Component {
  state = {
    isShow: true,
  };
  render() {
    const { isShow } = this.state;
    return (
      <div>
        <button onClick={() => this.setState({ isShow: !isShow })}>
          点我切换子组件
        </button>
        {isShow && <Child></Child>}
      </div>
    );
  }
}

class Child extends React.Component {
  // 类似vue2中的 beforeDestory，vue3 的onUnmounted
  // ✌场景：销毁定时器，dom的绑定的事件
  componentWillUnmount() {
    console.log(' 我是子组件，我要被老师销毁了 -----> ');
  }
  render() {
    return <div>我是child子组件</div>;
  }
}
